<template>
  <div class="table">
    <div class="header">
      <slot name="header">
        <div class="title">{{ title }}</div>
        <div class="handler"><slot name="headBtnSlot"></slot></div>
      </slot>
    </div>
    <el-table ref="tableRef" :data="pageData" v-bind="childrenPropos" border>
      <el-table-column
        v-if="showSection.control"
        align="center"
        type="selection"
      />
      <el-table-column
        v-if="showIndex.control"
        type="index"
        align="center"
        :min-width="showIndex.minWidth"
        :label="showIndex.label"
      />
      <template v-for="item in propList" :key="item.prop">
        <el-table-column
          :label="item.label"
          :min-width="item.minWidth"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <slot :name="item.slotName" :row="scope.row">
              {{ scope.row[item.prop] }}</slot
            >
          </template>
        </el-table-column>
      </template>
    </el-table>

    <div class="footer">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageListTotal"
        @size-change="emitSizeChange"
        @current-change="emitCurrentChange"
        background
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { ElTable } from "element-plus";
interface ITableProps {
  title?: string;
  pageData: any[];
  showSection?: any;
  showIndex?: any;
  propList: any[];
  pageListTotal?: number;
  childrenPropos?: any;
}

const props = withDefaults(defineProps<ITableProps>(), {
  title: "列表",
  showSection: () => ({}),
  showIndex: () => ({ control: false, minWidth: 60 }),
  pageListTotal: 0,

  // childrenPropos: () => ({})
});

const emits = defineEmits(["sizeChange", "currentChange"]);
const emitSizeChange = (e: any) => {
  emits("sizeChange", e);
};

const emitCurrentChange = (e: any) => {
  emits("currentChange", e);
};

const tableRef = ref<InstanceType<typeof ElTable>>();
// 折叠/展开所有
const isExpandAll = (isExpand: boolean) => {
  for (const item of props.pageData) {
    tableRef.value?.toggleRowExpansion(item, isExpand);
  }
};

defineExpose({ isExpandAll });
</script>

<style lang="less" scoped>
.header {
  display: flex;
  height: 45px;
  padding: 0 5px;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 20px;
    font-weight: 700;
  }
  .handler {
    align-items: center;
  }
}
.table {
  border-radius: 10px;
  background-color: white;
  padding: 10px;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
